<!--

    Copyright (c) 2010-2025 Eclipse Dirigible contributors

    All rights reserved. This program and the accompanying materials
    are made available under the terms of the Eclipse Public License v2.0
    which accompanies this distribution, and is available at
    http://www.eclipse.org/legal/epl-v20.html

    SPDX-FileCopyrightText: Eclipse Dirigible contributors
    SPDX-License-Identifier: EPL-2.0

-->
<!DOCTYPE HTML>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="edmDetails" ng-controller="DetailsController">

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" sizes="any" href="data:;base64,iVBORw0KGgo=">
        <title config-title></title>
        <script type="text/javascript" src="/services/web/editor-entity/configs/details-window.js"></script>
        <script type="text/javascript" src="/services/js/platform-core/services/loader.js?id=editor-js"></script>
        <link type="text/css" rel="stylesheet" href="/services/js/platform-core/services/loader.js?id=view-css" />
        <script type="text/javascript" src="/services/web/editor-entity/dialogs/js/details.js"></script>
    </head>

    <body class="bk-vbox">
        <bk-busy-indicator-extended class="bk-fill-parent" ng-hide="state.error || !state.isBusy" size="l">
            {{state.busyText}}
        </bk-busy-indicator-extended>
        <bk-icon-tab-bar side-padding="sm" selected-tab-id="selectedTab" ng-show="!state.error && !state.isBusy">
            <bk-icon-tab-bar-tablist>
                <bk-icon-tab-bar-tab label="General" tab-id="general" ng-click="switchTab('general')"></bk-icon-tab-bar-tab>
                <bk-icon-tab-bar-tab label="Data" tab-id="data" ng-click="switchTab('data')"></bk-icon-tab-bar-tab>
                <bk-icon-tab-bar-tab label="User interface" tab-id="ui" ng-click="switchTab('ui')"></bk-icon-tab-bar-tab>
                <bk-icon-tab-bar-tab label="Feed" tab-id="feed" ng-click="switchTab('feed')"></bk-icon-tab-bar-tab>
                <bk-icon-tab-bar-tab label="Security" tab-id="security" ng-click="switchTab('security')" ng-hide="dataParameters.entityType === 'PROJECTION'"></bk-icon-tab-bar-tab>
                <bk-icon-tab-bar-tab label="Imports" tab-id="imports" ng-click="switchTab('imports')"></bk-icon-tab-bar-tab>
            </bk-icon-tab-bar-tablist>
            <bk-icon-tab-bar-panel tab-id="general" ng-show="selectedTab === 'general'">
                <bk-form-group class="fd-container fd-form-layout-grid-container" ng-if="dialogType === 'entity'">
                    <bk-form-item class="fd-row">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="generalName" required="true" colon="true">Name</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--4">
                            <bk-input id="generalName" type="text" ng-required="true" ng-model="dataParameters.name" placeholder="Entity name"></bk-input>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="generalType" required="true" colon="true">Type</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-select placeholder="Select a type" label-id="generalType" ng-required="true" ng-model="dataParameters.entityType" dropdown-fixed="true">
                                <bk-option text="{{ type.label }}" value="type.value" ng-repeat="type in entityTypes track by $index"></bk-option>
                            </bk-select>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="generalCaption" colon="true">Caption</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--6">
                            <bk-input id="generalCaption" type="text" ng-model="dataParameters.caption" placeholder="Entity caption"></bk-input>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="generalDescription" colon="true">Description</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--6">
                            <bk-textarea id="generalDescription" ng-model="dataParameters.description"></bk-textarea>
                        </div>
                    </bk-form-item>
					<!--<bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2"></div>
                        <bk-checkbox id="generalGenerateReport" compact="false" ng-required="true" ng-model="dataParameters.generateReport" data-ng-true-value="'true'" data-ng-false-value="'false'"></bk-checkbox>
                        <bk-checkbox-label for="generalGenerateReport">Generate Report</bk-checkbox-label>
                    </bk-form-item>-->
					<bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2"></div>
                        <bk-checkbox id="generalMultilingual" compact="false" ng-required="true" ng-model="dataParameters.multilingual" data-ng-true-value="'true'" data-ng-false-value="'false'"></bk-checkbox>
                        <bk-checkbox-label for="generalMultilingual">Multilingual</bk-checkbox-label>
                    </bk-form-item>
                </bk-form-group>
                <bk-form-group class="fd-container fd-form-layout-grid-container" ng-if="dialogType === 'property'">
                    <bk-form-item class="fd-row">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="generalName" required="true" colon="true">Name</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--4">
                            <bk-input id="generalName" type="text" ng-required="true" ng-model="dataParameters.name" placeholder="Property name"></bk-input>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="generalDescription" colon="true">Description</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--6">
                            <bk-textarea id="generalDescription" ng-model="dataParameters.description"></bk-textarea>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2"></div>
                        <bk-checkbox id="generalRequired" compact="false" ng-required="true" ng-model="dataParameters.isRequiredProperty" data-ng-true-value="'true'" data-ng-false-value="'false'"></bk-checkbox>
                        <bk-checkbox-label for="generalRequired" required="true">Required</bk-checkbox-label>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2"></div>
                        <bk-checkbox id="generalCalc" compact="false" ng-model="dataParameters.isCalculatedProperty" data-ng-true-value="'true'" data-ng-false-value="'false'"></bk-checkbox>
                        <bk-checkbox-label for="generalCalc">Calculated</bk-checkbox-label>
                    </bk-form-item>
                    <bk-form-item ng-show="dataParameters.isCalculatedProperty === 'true'" class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2"></div>
                        <bk-form-label for="generalCpeC" colon="true">Calculated property expression for <strong>Create</strong></bk-form-label>
                    </bk-form-item>
                    <bk-form-item ng-show="dataParameters.isCalculatedProperty === 'true'" class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2"></div>
                        <div class="fd-col fd-col-md--8">
                            <bk-textarea id="generalCpeC" placeholder="create calculated property expression" ng-model="dataParameters.calculatedPropertyExpressionCreate" rows="5"></bk-textarea>
                        </div>
                    </bk-form-item>
                    <bk-form-item ng-show="dataParameters.isCalculatedProperty === 'true'" class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2"></div>
                        <bk-form-label for="generalCpeU" colon="true">Calculated property expression for <strong>Update</strong></bk-form-label>
                    </bk-form-item>
                    <bk-form-item ng-show="dataParameters.isCalculatedProperty === 'true'" class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2"></div>
                        <div class="fd-col fd-col-md--8">
                            <bk-textarea id="generalCpeU" placeholder="update calculated property expression" ng-model="dataParameters.calculatedPropertyExpressionUpdate" rows="5"></bk-textarea>
                        </div>
                    </bk-form-item>
                </bk-form-group>
            </bk-icon-tab-bar-panel>
            <bk-icon-tab-bar-panel tab-id="data" ng-show="selectedTab === 'data'">
                <bk-form-group class="fd-container fd-form-layout-grid-container" ng-if="dialogType === 'entity'">
                    <bk-form-item class="fd-row">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="ddn" required="true" colon="true">Database name</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--4">
                            <bk-input id="ddn" type="text" ng-required="true" ng-model="dataParameters.dataName" placeholder="Data name"></bk-input>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="ddc" colon="true">Databse count</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--10">
                            <bk-textarea id="ddc" ng-model="dataParameters.dataCount" rows="5"></bk-textarea>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="ddq" colon="true">Databse query</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--10">
                            <bk-textarea id="ddq" ng-model="dataParameters.dataQuery" rows="5"></bk-textarea>
                        </div>
                    </bk-form-item>
                </bk-form-group>
                <bk-form-group class="fd-container fd-form-layout-grid-container" ng-if="dialogType === 'property'">
                    <bk-form-item class="fd-row">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="ddn" required="true" colon="true">Database name</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--4">
                            <bk-input id="ddn" type="text" ng-required="true" ng-model="dataParameters.dataName" placeholder="Data name"></bk-input>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="dbtype" required="true" colon="true">Data type</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-select placeholder="Select an data type" label-id="dbtype" ng-required="true" ng-model="dataParameters.dataType" dropdown-fixed="true">
                                <bk-option text="{{ type.label }}" value="type.value" ng-repeat="type in dataTypes track by $index"></bk-option>
                            </bk-select>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="dbtype" colon="true">Order by</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-combobox-input input-id="dborder" ng-model="dataParameters.dataOrderBy" dropdown-items="dataOrderByOptions" placeholder="Select an order by option">
	                        </bk-combobox-input>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2" ng-show="dataParameters.dataType === 'VARCHAR' || dataParameters.dataType === 'CHAR'">
                            <bk-form-label for="dblen" required="true" colon="true">Length</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--2" ng-show="dataParameters.dataType === 'VARCHAR' || dataParameters.dataType === 'CHAR'">
                            <bk-step-input input-id="dblen" name="dblen" string-to-number ng-required="true" ng-model="dataParameters.dataLength" placeholder="20" style="max-width: 320px"></bk-step-input>
                        </div>
                        <div class="fd-col fd-col-md--2" ng-show="dataParameters.dataType === 'DECIMAL'">
                            <bk-form-label for="dbprecision" colon="true">Precision</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--2" ng-show="dataParameters.dataType === 'DECIMAL'">
                            <bk-step-input input-id="dbprecision" name="dbprecision" string-to-number ng-required="true" ng-model="dataParameters.dataPrecision" placeholder="0" style="max-width: 320px">
                            </bk-step-input>
                        </div>
                        <div class="fd-col fd-col-md--2" ng-show="dataParameters.dataType === 'DECIMAL'">
                            <bk-form-label for="dbscale" colon="true">Scale</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--2" ng-show="dataParameters.dataType === 'DECIMAL'">
                            <bk-step-input input-id="dbscale" name="dbscale" string-to-number ng-required="true" ng-model="dataParameters.dataScale" placeholder="0" style="max-width: 320px">
                            </bk-step-input>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2"></div>
                        <div class="fd-col fd-col-md--2">
                            <bk-checkbox id="dbpk" compact="false" ng-model="dataParameters.dataPrimaryKey" data-ng-true-value="'true'" data-ng-false-value="'false'"></bk-checkbox>
                            <bk-checkbox-label for="dbpk">Primary key</bk-checkbox-label>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-checkbox id="dbkk" compact="false" ng-model="dataParameters.dataAutoIncrement" data-ng-true-value="'true'" data-ng-false-value="'false'"></bk-checkbox>
                            <bk-checkbox-label for="dbkk">Auto increment</bk-checkbox-label>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-checkbox id="dbnn" compact="false" ng-model="dataParameters.dataNotNull" data-ng-true-value="'true'" data-ng-false-value="'false'"></bk-checkbox>
                            <bk-checkbox-label for="dbnn">Not null</bk-checkbox-label>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-checkbox id="dbu" compact="false" ng-model="dataParameters.dataUnique" data-ng-true-value="'true'" data-ng-false-value="'false'"></bk-checkbox>
                            <bk-checkbox-label for="dbu">Unique</bk-checkbox-label>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="dbdv" colon="true">Default value</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-input id="dbdv" type="text" ng-model="dataParameters.dataDefaultValue"></bk-input>
                        </div>
                    </bk-form-item>
                </bk-form-group>
            </bk-icon-tab-bar-panel>
            <bk-icon-tab-bar-panel tab-id="ui" ng-show="selectedTab === 'ui'">
                <bk-form-group class="fd-container fd-form-layout-grid-container fd-form-group" ng-if="dialogType === 'entity'">
                    <bk-form-item class="fd-row">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uit" colon="true">Title</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--4">
                            <bk-input id="uit" type="text" ng-model="dataParameters.title"></bk-input>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uith" colon="true">Tooltip</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--6">
                            <bk-input id="uith" type="text" ng-model="dataParameters.tooltip" placeholder="Tooltip hint"></bk-input>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uii" colon="true">Icon</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--3">
                            <bk-select placeholder="Select an icon" label-id="uui" ng-model="dataParameters.icon" dropdown-fixed="true">
                                <bk-option text="{{ ::icon.name }}" value="::icon.url" icon="{{::icon.url}}" ng-repeat="icon in icons track by $index"></bk-option>
                            </bk-select>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uimk" colon="true">Menu key</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-input id="uimk" type="text" ng-model="dataParameters.menuKey"></bk-input>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uiml" colon="true">Menu label</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-input id="uiml" type="text" ng-model="dataParameters.menuLabel"></bk-input>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uimi" colon="true">Menu index</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-step-input input-id="uimi" name="manuIndex" ng-model="dataParameters.menuIndex" style="max-width: 320px"></bk-step-input>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny" ng-if="dataParameters.entityType !== 'SETTING' && dataParameters.entityType !== 'REPORT'">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uilt" required="true" colon="true">Layout type</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--4">
                            <bk-select placeholder="Select a layout" label-id="uilt" ng-required="true" ng-model="dataParameters.layoutType" dropdown-fixed="true">
                                <bk-option text="{{ type.label }}" value="type.value" ng-repeat="type in layoutTypes track by $index"></bk-option>
                            </bk-select>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny" ng-if="dataParameters.entityType !== 'SETTING' && dataParameters.entityType !== 'REPORT'">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uip" colon="true">Perspective</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--4">
                            <bk-select placeholder="Select a perspective" label-id="uip" ng-model="dataParameters.perspectiveName" dropdown-fixed="true">
                                <bk-option text="{{ perspective.label }}" value="perspective.id" ng-repeat="perspective in dataParameters.perspectives track by $index"></bk-option>
                            </bk-select>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny" ng-if="dataParameters.entityType !== 'SETTING' && dataParameters.entityType !== 'REPORT'">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uip" colon="true">Navigation</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--6">
                            <bk-select placeholder="Select a navigation" label-id="uip" ng-model="dataParameters.navigationPath" dropdown-fixed="true">
                                <bk-option text="{{ navigation.label }}" value="navigation.path" ng-repeat="navigation in dataParameters.navigations track by $index"></bk-option>
                            </bk-select>
                        </div>
                    </bk-form-item>
                </bk-form-group>
                <bk-form-group class="fd-container fd-form-layout-grid-container" ng-if="dialogType === 'property'">
                    <bk-form-item class="fd-row">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uiwt" required="true" colon="true">Widget type</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--10">
                            <bk-select placeholder="Select a type" label-id="uiwt" ng-required="true" ng-model="dataParameters.widgetType" dropdown-fixed="true">
                                <bk-option text="{{ type.label }}" value="type.value" ng-repeat="type in widgetTypes track by $index"></bk-option>
                            </bk-select>
                        </div>
                        <div class="fd-col fd-col-md--2" ng-show="dataParameters.widgetType === 'DROPDOWN'">
                            <bk-form-label for="uidk" required="true" colon="true">Dropdown key</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--2" ng-show="dataParameters.widgetType === 'DROPDOWN'">
                            <bk-input id="uidk" type="text" ng-required="true" ng-model="dataParameters.widgetDropDownKey"></bk-input>
                        </div>
                        <div class="fd-col fd-col-md--2" ng-show="dataParameters.widgetType === 'DROPDOWN'">
                            <bk-form-label for="uidv" required="true" colon="true">Dropdown value</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--2" ng-show="dataParameters.widgetType === 'DROPDOWN'">
                            <bk-input id="uidv" type="text" ng-required="true" ng-model="dataParameters.widgetDropDownValue"></bk-input>
                        </div>
                        <bk-checkbox id="uidms" compact="false" ng-required="false" ng-model="dataParameters.widgetDropDownMultiSelect" data-ng-true-value="'true'" data-ng-false-value="'false'"
                            ng-show="dataParameters.widgetType === 'DROPDOWN'"></bk-checkbox>
                        <bk-checkbox-label for="uidms" ng-show="dataParameters.widgetType === 'DROPDOWN'">Multi-Select</bk-checkbox-label>
                    </bk-form-item>

                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="dependsonproperty" colon="true">Depends on Property</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--4">
                            <bk-input id="dependsonproperty" type="text" ng-model="dataParameters.widgetDependsOnProperty" placeholder="Property depending on">
                            </bk-input>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="dependsonentity" colon="true">Depends on Entity</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--4">
                            <bk-input id="dependsonentity" type="text" ng-model="dataParameters.widgetDependsOnEntity" placeholder="Entity depending on">
                            </bk-input>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="dependsonvaluefrom" colon="true">Value From</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--4">
                            <bk-input id="dependsonvaluefrom" type="text" ng-model="dataParameters.widgetDependsOnValueFrom" placeholder="Property used to get value from"></bk-input>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="dependsonfilterby" colon="true">Filter By</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--4">
                            <bk-input id="dependsonfilterby" type="text" ng-model="dataParameters.widgetDependsOnFilterBy" placeholder="Property to set value to or filter by"></bk-input>
                        </div>
                    </bk-form-item>

                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uiws" colon="true">Widget size</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-select placeholder="Select a size" label-id="uiws" ng-model="dataParameters.widgetSize" dropdown-fixed="true">
                                <bk-option text="{{ size.label }}" value="size.value" ng-repeat="size in widgetSizes track by $index"></bk-option>
                            </bk-select>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uilen" colon="true">Length</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-step-input index-id="uilen" name="uilen" string-to-number ng-required="true" ng-model="dataParameters.widgetLength" placeholder="20" style="max-width: 320px">
                            </bk-step-input>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uilab" colon="true">Label</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--6">
                            <bk-input id="uilab" type="text" ng-model="dataParameters.widgetLabel" placeholder="Label text"></bk-input>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uislab" colon="true">Short label</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-input id="uislab" type="text" ng-model="dataParameters.widgetShortLabel" placeholder="Short label text"></bk-input>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uipat" colon="true">Pattern</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-input id="uipat" type="text" ng-model="dataParameters.widgetPattern" placeholder="Input pattern"></bk-input>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uif" colon="true">Format</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-input id="uif" type="text" ng-model="dataParameters.widgetFormat" placeholder="Rendering format"></bk-input>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uith" colon="true">Tooltip</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--2">
                            <bk-input id="uith" type="text" ng-model="dataParameters.tooltip" placeholder="Tooltip hint"></bk-input>
                        </div>
                    </bk-form-item>
                    <!-- 
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uiser" colon="true">Service (feed)</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--10">
                            <bk-input id="uiser" type="text" ng-model="dataParameters.widgetService" placeholder="REST service will be used as a feed"></bk-input>
                        </div>
                    </bk-form-item>
                     -->
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uisec" colon="true">Section</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--6">
                            <bk-input id="uisec" type="text" ng-model="dataParameters.widgetSection" placeholder="Section to be placed in"></bk-input>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="uimt" colon="true">Major type</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--3">
                            <bk-select placeholder="Select a type" label-id="uimt" ng-model="dataParameters.widgetIsMajor" dropdown-fixed="true">
                                <bk-option text="{{ type.label }}" value="type.value" ng-repeat="type in majorTypes track by $index"></bk-option>
                            </bk-select>
                        </div>
                    </bk-form-item>
                </bk-form-group>
            </bk-icon-tab-bar-panel>
            <bk-icon-tab-bar-panel tab-id="feed" ng-show="selectedTab === 'feed'">
                <bk-form-group class="fd-container fd-form-layout-grid-container fd-form-group" ng-if="dialogType === 'entity'">
                    <bk-form-item class="fd-row">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="furl" required="true" colon="true">Feed URL</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--4">
                            <bk-input id="furl" type="text" ng-required="true" ng-model="dataParameters.feedUrl">
                            </bk-input>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="fun" colon="true">Username</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--4">
                            <bk-input id="fun" type="text" ng-model="dataParameters.feedUsername"></bk-input>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="fp" colon="true">Password</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--4">
                            <bk-input id="fp" type="password" ng-model="dataParameters.feedPassword"></bk-input>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="fs" required="true" colon="true">Schedule</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--4">
                            <bk-input id="fs" type="text" ng-required="true" ng-model="dataParameters.feedSchedule">
                            </bk-input>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="fpth" colon="true">Path</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--4">
                            <bk-input id="fpth" type="text" ng-model="dataParameters.feedPath"></bk-input>
                        </div>
                    </bk-form-item>
                </bk-form-group>
                <bk-form-group class="fd-container fd-form-layout-grid-container fd-form-group" ng-if="dialogType === 'property'">
                    <bk-form-item class="fd-row">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="furl" colon="true">Property name</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--4">
                            <bk-input id="furl" type="text" ng-model="dataParameters.feedPropertyName"></bk-input>
                        </div>
                    </bk-form-item>
                </bk-form-group>
            </bk-icon-tab-bar-panel>
            <bk-icon-tab-bar-panel tab-id="security" ng-show="selectedTab === 'security'">
                <bk-form-group class="fd-container fd-form-layout-grid-container">
                    <bk-form-item class="fd-row">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="srr" colon="true">Read role</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--4 fd-col-lg--3">
                            <bk-input id="srr" type="text" ng-model="dataParameters.roleRead" placeholder="role name" ng-disabled="dataParameters.generateDefaultRoles === 'true'"></bk-input>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny" ng-hide="dataParameters.entityType === 'REPORT' || dataParameters.entityType === 'FILTER'">
                        <div class="fd-col fd-col-md--2">
                            <bk-form-label for="swr" colon="true">Write role</bk-form-label>
                        </div>
                        <div class="fd-col fd-col-md--4 fd-col-lg--3">
                            <bk-input id="swr" type="text" ng-model="dataParameters.roleWrite" placeholder="role name" ng-disabled="dataParameters.generateDefaultRoles === 'true'"></bk-input>
                        </div>
                    </bk-form-item>
                    <bk-form-item class="fd-row fd-margin-top--tiny">
                        <div class="fd-col fd-col-md--2"></div>
                        <bk-checkbox id="generalGenerateDefaultRoles" compact="false" ng-required="false" ng-model="dataParameters.generateDefaultRoles" data-ng-true-value="'true'" data-ng-false-value="'false'"
                            ng-change="toggleDefaultRoles()"></bk-checkbox>
                        <bk-checkbox-label for="generalGenerateDefaultRoles">Generate Default Roles</bk-checkbox-label>
                    </bk-form-item>
                </bk-form-group>
            </bk-icon-tab-bar-panel>
            <bk-icon-tab-bar-panel tab-id="imports" ng-show="selectedTab === 'imports'">
                <bk-form-group class="fd-container fd-form-layout-grid-container" ng-if="dialogType === 'entity'">
                    <bk-form-item class="fd-row">
                        <div class="fd-col">
                            <bk-form-label for="importscode" colon="true">Imports</bk-form-label>
                        </div>
                        <div class="fd-col">
                            <bk-textarea id="importscode" placeholder="imports code" ng-model="dataParameters.importsCode" rows="10"></bk-textarea>
                        </div>
                    </bk-form-item>
                </bk-form-group>
                <bk-form-group class="fd-container fd-form-layout-grid-container" ng-if="dialogType === 'property'">
                    <bk-form-item class="fd-row">
                        <div class="fd-col fd-col-md--4">
                            <div for="importscode" colon="true">Imports can be set at the <strong>Entity</strong> level
                            </div>
                        </div>
                    </bk-form-item>
                </bk-form-group>
            </bk-icon-tab-bar-panel>
        </bk-icon-tab-bar>
        <bk-bar bar-design="footer" in-page="true" padding="s" ng-show="!state.error && !state.isBusy">
            <bk-bar-right>
                <bk-bar-element>
                    <bk-button label="Save" state="emphasized" compact="true" ng-click="save()"></bk-button>
                </bk-bar-element>
                <bk-bar-element>
                    <bk-button label="Cancel" state="transparent" ng-click="cancel()" compact="true"></bk-button>
                </bk-bar-element>
            </bk-bar-right>
        </bk-bar>
        <bk-message-page glyph="sap-icon--error" ng-if="state.error">
            <bk-message-page-title>Dialog encounterd an error!</bk-message-page-title>
            <bk-message-page-subtitle>{{errorMessage}}</bk-message-page-subtitle>
            <bk-message-page-actions>
                <bk-button compact="true" label="Close" ng-click="cancel()"></bk-button>
            </bk-message-page-actions>
        </bk-message-page>
        <theme></theme>
    </body>

</html>
